.esdttoken-page {
  padding-bottom: 6.25rem;
  box-sizing: border-box;
  background-color: #191B1F;
  .top-box {
    background: linear-gradient(
      90deg,
      rgba(255, 0, 76, 0.1) 0%,
      rgba(16, 203, 129, 0.1) 100%
    );
    padding: 0px 1rem 1rem;
    box-sizing: border-box;
    .top-banner {
      height: 9.375rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      position: relative;
      .banner-title {
        font-family: DingTalk JinBuTi;
        font-size: .875rem;
        font-weight: normal;
        line-height: .875rem;
        color: #ffffff;
        margin-bottom: .625rem;
      }
      .banner-sub-title {
        font-family: DingTalk JinBuTi;
        font-size: 1rem;
        font-weight: normal;
        color: rgba(255, 255, 255, 0.5);
        margin-bottom: .625rem;
      }
      .banner-btn {
        cursor: pointer;
        height: 1.25rem;
        line-height: 1.25rem;
        padding: 0px .5rem;
        border-radius: 6.25rem;
        background: linear-gradient(270deg, #ffe2a3 0%, #ff578a 100%);
        font-family: DingTalk JinBuTi;
        font-size: 14px;
        font-weight: normal;
        color: #191b1f;
      }
      .banner-img {
        position: absolute;
        right: 1.25rem;
        bottom: 0px;
        width: 210px;
        height: 125px;
        opacity: 1;
      }
    }
    .top {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-start;
      .right {
        width: 10rem;
        height: 11.25rem;
        margin-left: .625rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .header {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          margin-bottom: .625rem;
          margin-top: .3125rem;

          .title-text {
            font-size: .75rem;
            font-weight: normal;
            display: flex;
            align-items: center;
            letter-spacing: 0px;
            color: #dbc589;
            font-family: DingTalk JinBuTi;
          }
          .right-corner {
            height: .875rem;
            line-height: .875rem;
            opacity: 1;
            background: rgba(255, 255, 255, 0.098);
            border-radius: 3.125rem;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0px .25rem;
            font-family: Microsoft YaHei UI;
            font-size: .75rem;
            font-weight: normal;
            text-align: center;

            color: rgba(255, 255, 255, 0.498);
            cursor: pointer;
            .question-icon {
              margin-left: .125rem;
            }
          }
        }
        .total-data-box {
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          align-items: flex-start;
          .total-text {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            font-family: DingTalk JinBuTi;
            font-size: 1rem;
            font-weight: normal;
            letter-spacing: 0px;
            color: #2ecc71;
            margin-bottom: .375rem;

            .trend-icon {
              width: .75rem;
              height: .75rem;
              margin-right: .1875rem;
            }
          }
          .trans-row {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            font-size: .75rem;
            font-weight: normal;
            margin-bottom: .3125rem;
            .trans-text {
              color: #fff;
              margin-right: .5rem;
            }
            .time-data {
              color: #f2525c;
            }
          }
          .data-group {
            width: 100%;
            .data-row {
              display: flex;
              flex-direction: row;
              justify-content: space-between;
              align-items: center;
              margin-bottom: .125rem;
              .item-label {
                flex: 1;
                font-size: .75rem;
                font-weight: normal;
                line-height: .75rem;
                color: rgba(255, 255, 255, 0.8);
                text-align: left;
              }
              .item-value {
                flex: 1;
                font-size: .75rem;
                font-weight: normal;
                line-height: .75rem;
                color: rgba(255, 255, 255, 0.8);
                text-align: right;
              }
              .blod-text {
                font-weight: 600;
              }
              .origin-text {
                color: #ccb883;
              }
              .green-text {
                color: #10cb81;
              }
            }
          }
          .action-box {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            .subscribe-btn {
              width: 3.75rem;
              height: 1.25rem;
              line-height: 1.25rem;
              border-radius: 6.25rem;
              background: linear-gradient(90deg, #fee9ae 0%, #38ce78 100%);
              font-family: Microsoft YaHei UI;
              font-size: .75rem;
              font-weight: normal;
              text-align: center;
              letter-spacing: 0px;
              color: #2b2c33;
              padding: 0px;
              border: 0px;
            }
            .redemption-btn {
              width: 3.75rem;
              height: 1.25rem;
              line-height: 1.25rem;
              border-radius: 6.25rem;
              background: linear-gradient(90deg, #ffe4a0 0%, #ff648b 99%);
              font-family: Microsoft YaHei UI;
              font-size: .75rem;
              font-weight: normal;
              text-align: center;
              letter-spacing: 0px;
              color: #2b2c33;
              padding: 0px;
              border: 0px;
            }
          }
        }
      }
      .left {
        width: calc(100% - 10rem);
        background-color: transparent;
        .left-chart {
          background-color: #121417;
          height: 11.875rem;
        }
        .contract-address-row {
          width: 100%;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          margin-top: .25rem;
          .address-value {
            width: calc(100% - 3rem);
            height: 1.25rem;
            border-radius: .25rem;
            background: #121417;
            font-family: Microsoft YaHei UI;
            font-size: .75rem;
            line-height: 1.25rem;
            color: rgba(255, 255, 255, 0.8);
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .icon-box {
            width: 3.125rem;
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            align-items: center;
            .icon1 {
              width: 1.25rem;
              height: 1.25rem;
            }
            .icon2 {
              width: 1.25rem;
              height: 1.25rem;
              margin-left: .25rem;
            }
          }
        }
      }
    }
  }
  .about-box {
    padding: .75rem 1.25rem;
    background-color: #191B1F;
    .header {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding-bottom: .75rem;
      position: relative;
      .title-box {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        .title-text {
          font-family: Microsoft YaHei UI;
          font-size: .875rem;
          font-weight: bold;
          line-height: .875rem;
          letter-spacing: 0px;
          color: #ffffff;
        }
      }
      .title-img-box {
        width: 287px;
        height: 161px;
        position: absolute;
        left: calc(50% - 143.5px);
        bottom: -50px;
        z-index: 9;
        .table-title-img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .about-content {
      min-height: 800px;
      .each-block {
        margin-bottom: 20px;
        color: #fff;
        .title {
          font-size: 16px;
          font-weight: 600;
          margin-bottom: 10px;
        }
        .sub-title {
          font-size: 13px;
          font-weight: 600;
          margin-bottom: 10px;
        }
        .desc {
          font-size: 13px;
          line-height: 24px;
        }
        .desc-group {
          padding: 0px;
          margin: 0px;
          padding-left: 20px;
          margin-bottom: 10px;
        }
      }
    }
  }
}
